<template>
  <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>请您选择体检机构</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <ul class="hospital">
            <li v-for="(hospital, index) in hospitalList" :key="index">
                <h3 @click="goToStemeal(hospital.id)">
                    <!-- 沈阳熙康云医院-和平院区 -->
                    {{ hospital.name }}
                    <i class="fa fa-angle-right"></i>
                </h3>
                <div class="hospita-info">
                    <img :src="hospital.picture">
                    <table>
                        <tr>
                            <td>营业时间</td>
                            <td>{{ hospital.businessHour }}</td>
                        </tr>
                        <tr>
                            <td>采血截止时间</td>
                            <td>{{ hospital.deadline }}</td>
                        </tr>
                        <tr>
                            <td>电话</td>
                            <td>{{ hospital.telephone }}</td>
                        </tr>
                        <tr>
                            <td>地址</td>
                            <td>{{ hospital.address }}</td>
                        </tr>
                    </table>
                </div>
                <div class="about">
                    <p @click="copyPhoneNumber(hospital)">
                        <i class="fa fa-phone"></i>
                        联系我们
                    </p>
                    <p @click="guide(hospital)">
                        <i class="fa fa-map-marker"></i>
                        查找位置
                    </p>
                </div>
            </li>
        </ul>
        
        <div class="bottom-ban"></div>
        <Footer/>
    </div>
    

</template>

<script setup>
import { listHospital } from "@/api/hospital";
const router = useRouter()

//查询医院
const hospitalList = ref([])
function getList() {
    listHospital().then(response=>{
        hospitalList.value = response.data.data
    })
}

function goToStemeal(id) {
    router.push({path: '/setmeal',query:{hpId: id} })
}

function copyPhoneNumber(hospital){
        // 获取电话号码
            const phoneNumber = hospital.telephone;
            // 使用Clipboard API复制电话号码
            navigator.clipboard.writeText(phoneNumber).then(() => {
            // 复制成功的操作
            alert('电话号码已复制到剪贴板');
            window.location.href = 'tel:' + phoneNumber;
            }, () => {
            // 复制失败的操作
            alert('复制失败，请手动复制');
            });   
        }

        function guide(hospital) {
                const signMap = 'gd';
                const lng = hospital.longitude;
                const lat = hospital.latitude;
                const partnerAddress = hospital.address;
                if (partnerAddress && partnerAddress !== '') {
                    // 使用 Clipboard API 复制地址名称
                    navigator.clipboard.writeText(partnerAddress).then(() => {
                    alert('地址名称已复制到剪贴板');
                    }).catch(() => {
                    alert('复制失败，请手动复制');
                    });
                } else {
                    alert('地址信息不完整');
                }
                
                if (partnerAddress && partnerAddress!== '' && lng!== undefined && lat!== undefined) {
                    let browserVersion = customBrowserVersion();
                    let mapUrl = '';

                    if (signMap === 'gd') {
                        if (browserVersion.android || browserVersion.ios) {
                            const appScheme = browserVersion.android? 'androidamap://' : 'iosamap://';
                            const appUrl = appScheme + 'navi?sourceApplication=appname&poiname=' +
                                encodeURIComponent(partnerAddress) +
                                '&lat=' + lat +
                                '&lon=' + lng +
                                '&dev=0';
                            const canOpenApp = window.open(appUrl);
                            if (canOpenApp) {
                            } else {
                                mapUrl = `https://uri.amap.com/navigation?to=${encodeURIComponent(partnerAddress)}&tocoord=${lng},${lat}&mode=car`;
                            }
                        } else {
                            mapUrl = `https://uri.amap.com/navigation?to=${encodeURIComponent(partnerAddress)}&tocoord=${lng},${lat}&mode=car`;
                        }
                    } else if (signMap === 'bd') {
                        if (browserVersion.android || browserVersion.ios) {
                            const appScheme = browserVersion.android? 'baidumap://' : 'iosbaidumap://';
                            const appUrl = appScheme +'map/direction?destination=name:' +
                                encodeURIComponent(partnerAddress) +
                                ',latlng:' + lat + ',' + lng;
                            const canOpenApp = window.open(appUrl);
                            if (canOpenApp) {
                            } else {
                                mapUrl = `https://map.baidu.com/daohang/?destination=${encodeURIComponent(partnerAddress)}&destinationlatlng=${lat},${lng}&mode=car`;
                            }
                        } else {
                            mapUrl = `https://map.baidu.com/daohang/?destination=${encodeURIComponent(partnerAddress)}&destinationlatlng=${lat},${lng}&mode=car`;
                        }
                    }

                    if (mapUrl) {
                        window.location.href = mapUrl;
                    }
                } else {
                    const searchUrl = `https://map.baidu.com/search?query=${encodeURIComponent(partnerAddress)}`;
                    window.location.href = searchUrl;
                }
            }

            function customBrowserVersion() {
                var u = navigator.userAgent;
                return {
                    trident: u.indexOf('Trident') > -1,
                    presto: u.indexOf('Presto') > -1,
                    webKit: u.indexOf('AppleWebKit') > -1,
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
                    mobile:!!u.match(/AppleWebKit.*Mobile.*/),
                    ios:!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                    android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
                    iPhone: u.indexOf('iPhone') > -1,
                    iPad: u.indexOf('iPad') > -1,
                    webApp: u.indexOf('Safari') == -1,
                    weixin: u.indexOf('MicroMessenger') > -1,
                    qq: u.match(/\sQQ/i) == " qq",
                    isBaidu: u.indexOf('baiduboxapp')!== -1,
                    isqqBrowser: u.indexOf('mqqbrowser')!== -1,
                    isWxBrowser: u.indexOf('micromessenger')!== -1,
                    isUc: u.indexOf('ucbrowser')!== -1,
                };
            }

getList()
</script>

<style scoped>
/*********************** 总容器 ***********************/
.wrapper{
    width: 100%;
    height: 100%;
    background-color: #F9F9F9;
}

/*********************** header ***********************/
header{
    width: 100%;
    height: 15.7vw;
    background-color: #FFF;

    position: fixed;
    left: 0;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;
    padding: 0 3.6vw;
}
header .fa{
    font-size: 8vw;
}

/*********************** common样式 ***********************/
.top-ban{
    width: 100%;
    height: 15.7vw;
}
.bottom-ban{
    width: 100%;
    height: 14.2vw;
}

/*********************** hospital ***********************/
.hospital{
    width: 100%;
    margin-top: 3.6vw;
}
.hospital li{
    width: 92.8vw;
    margin: 0 auto;
    border: solid 1px #EEE;
    border-radius: 1vw;
    box-shadow: 2px 2px 5px rgba(0,0,0,.08);
    background-color: #FFF;
    margin-bottom: 3.6vw;

    box-sizing: border-box;
    padding: 4vw;
}
.hospital li h3{
    box-sizing: border-box;
    padding-left: 2.4vw;
    border-left: solid 3px #157999;
    font-size: 4.3vw;
    display: flex;
    justify-content: space-between;

    user-select: none;
    cursor: pointer;
}
.hospital li h3 i{
    font-size: 5vw;
}

.hospital li .hospita-info{
    width: 100%;
    margin-top: 3vw;
    display: flex;
    justify-content: space-between;
}
.hospital li .hospita-info img{
    width: 22vw;
    height: 22vw;
}
.hospital li .hospita-info table{
    width: 59vw;
    font-size: 3.5vw;
    color: #666;
    
}
.hospital li .hospita-info table tr{
    height: 6vw;
}
.hospital li .hospita-info table tr td{
    vertical-align: top;
}
.hospital li .hospita-info table tr td:first-child{
    width: 15vw;
}
.hospital li .about{
    display: flex;
    justify-content: flex-end;
    margin-top: 2vw;
}
.hospital li .about p{
    width: 30vw;
    height: 8vw;
    border: solid 1px #157999;
    border-radius: 2vw;

    text-align: center;
    line-height: 8vw;
    margin-left: 2vw;

    font-size: 4vw;
    color: #157999;

    user-select: none;
    cursor: pointer;
}
.hospital li .about p i{
    color: #555;
    margin-right: 1vw;
}
</style>